import { useState } from 'react'
import '../../css/selected.scss'
import leftimg from '../../../../../public/leftimg.png'
import vipImg from '../../../../../public/vip1.webp'
// 引入图标
import { LeftOutlined, RightOutlined, ArrowRightOutlined, PlusCircleFilled, LinuxOutlined, MediumOutlined, RedditOutlined, CoffeeOutlined, SunOutlined, TruckOutlined, AliwangwangOutlined } from '@ant-design/icons';

function selectedRecommendation() {
    const festivalAll = [
        '精选推荐', '热点关注', '中国航天日',
        '世界知识产权日', '世界平面设计日',
        '劳动节', '立夏'
    ]
    const festivalImgs = [
        {
            img: "/public/aaa.gif",
            title: "秋秋设计",
            msg: '高级简约时尚炫彩新品发布..',
            avatar: <LinuxOutlined />
        },
        {
            img: '/public/aab.webp',
            title: "金刚芭比",
            msg: '特惠五一大活动来袭..',
            avatar: <RedditOutlined />
        },
        {
            img: "/public/aac.webp",
            title: "微印象",
            msg: '小清新绿色无污染环保主题..',
            avatar: <CoffeeOutlined />
        },
        {
            img: '/public/aad.webp',
            title: "神之神角",
            msg: '5.4青年节更显大家风采..',
            avatar: <SunOutlined />
        },
        {
            img: '/public/aae.webp',
            title: "诺澜",
            msg: '爱情公寓全员阵容来袭..',
            avatar: <TruckOutlined />
        },
        {
            img: '/public/aaf.webp',
            title: "诺伊可爱",
            msg: '创意卡通可爱元素主题..',
            avatar: <AliwangwangOutlined />
        },
        {
            img: "/public/aac.webp",
            title: "微印象",
            msg: '小清新绿色无污染环保主题..',
            avatar: <MediumOutlined />
        },
        {
            img: '/public/aad.webp',
            title: "神之神角",
            msg: '5.4青年节更显大家风采..',
            avatar: <LinuxOutlined />
        },
    ]
    // 左右箭头切换页面
    const [arrowIndex, setarrowIndex] = useState(0)
    const [show, setShow] = useState(true)

    const handleArrow = (direction: 'left' | 'right') => {
        if (direction === 'left') {
            setShow(true)
            setarrowIndex(0);
        } else {
            setShow(false)
            setarrowIndex(-810);
        }
    }
    return (
        <div>
            <div className='RecommendBox'>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10PX' }}>
                    <h2>今日推荐 </h2>
                    <div style={{ color: '#c79974', fontSize: '14px', marginLeft: '5px' }}>开通会员免费用</div>
                    <ul className='RecommendFestival'>
                        {
                            festivalAll.map((item: any, index: any) => (
                                <li key={index} className='festival_li'>{item}</li>
                            ))
                        }
                    </ul>
                </div>
                <div>
                    查看推荐&gt;
                </div>
            </div>
            <div className='CreatePoster'>
                <div className='CreatePoster_left'>
                    <div>
                        <PlusCircleFilled style={{ fontSize: '48px', color: '#1261ff' }} />
                        <h4> 空白创建</h4>
                    </div>
                    <img src={leftimg} alt="" />
                </div>
                <div className='CreatePoster_template'>
                    <div className='CreatePoster_right' style={{ transform: `translateX(${arrowIndex}px)` }}>
                        {
                            festivalImgs.map((item: any, index: any) => (
                                <div className='CreatePoster_right_div' key={index} >
                                    <div><img src={item.img} alt="" /></div>
                                    <div className='CreatePoster_right_layer'>海报</div>
                                    <div className='CreatePoster_right_masking'>
                                        <p>查看2个小模块</p>
                                    </div>
                                    <div className='CreatePoster_right_content'>
                                        <p>  {item.msg} </p>
                                        <b style={{ display: 'block' }}>
                                            <span style={{ marginRight: '10px', color: '#ff69b4' }}>{item.avatar}</span>
                                            <span>{item.title}</span>
                                        </b>
                                    </div>
                                </div>
                            ))
                        }

                        {/* 左右箭头 */}
                        <button onClick={() => handleArrow('left')} className='arrowLeft' style={{ display: show ? 'none' : 'block' }} ><LeftOutlined /></button>
                        <button onClick={() => handleArrow('right')} className='arrowRight' style={{ display: !show ? 'none' : 'block' }}><RightOutlined /></button>
                    </div>
                </div>

            </div>
            <div className='carousel-box'>
                <img src={vipImg} width={'100%'} height={'100%'} style={{ borderRadius: '10px' }} alt="" />
            </div>
        </div>
    )
}

export default selectedRecommendation



